<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				min-height: 100vh;
				padding: 20px;
			}
			.container {
				max-width: 1200px;
				margin: 0 auto;
				background: white;
				border-radius: 15px;
				padding: 30px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
			}
			.upload-section {
				margin-bottom: 30px;
				text-align: center;
			}
			.upload-btn {
				background: #007bff;
				color: white;
				border: none;
				padding: 12px 24px;
				border-radius: 8px;
				cursor: pointer;
				font-size: 16px;
				margin-right: 15px;
			}
			.upload-btn:hover {
				background: #0056b3;
			}
			.clear-btn {
				background: #dc3545;
				color: white;
				border: none;
				padding: 12px 24px;
				border-radius: 8px;
				cursor: pointer;
				font-size: 16px;
			}
			.clear-btn:hover {
				background: #c82333;
			}
			#fileInput {
				display: none;
			}
			.control-panel {
				background: #f8f9fa;
				padding: 20px;
				border-radius: 10px;
				margin-bottom: 30px;
				text-align: center;
			}
			.control-panel label {
				font-weight: bold;
				margin-right: 10px;
			}
			#heightSlider {
				width: 300px;
				margin: 0 10px;
			}
			#heightValue {
				font-weight: bold;
				color: #007bff;
			}
			.grid-container {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
			.grid-row {
				display: flex;
				gap: 10px;
			}
			.grid-item {
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-weight: bold;
				font-size: 14px;
				border-radius: 8px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s ease;
				flex-shrink: 0;
				overflow: hidden;
				position: relative;
			}
			.grid-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			}
			.grid-item img, .grid-item video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.file-icon {
				font-size: 32px;
				margin-bottom: 8px;
			}
			.file-name {
				font-size: 12px;
				text-align: center;
				word-break: break-all;
				max-width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="upload-section">
				<button class="upload-btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
				<button class="clear-btn" onclick="clearAllFiles()">清空所有</button>
				<input type="file" id="fileInput" multiple>
			</div>
			<div class="control-panel">
				<label for="heightSlider">调整统一高度：</label>
				<input
					type="range"
					id="heightSlider"
					min="100"
					max="400"
					value="200"
					step="10"
				/>
				<span id="heightValue">200px</span>
			</div>
			<div class="grid-container" id="gridContainer"></div>
		</div>
		<script>
			let uploadedFiles = [];
			function handleFileSelect(event) {
				const files = Array.from(event.target.files);
				processFiles(files);
			}
			function processFiles(files) {
				files.forEach(file => {
					if (file.type.startsWith('image/')) {
						processImageFile(file);
					} else if (file.type.startsWith('video/')) {
						processVideoFile(file);
					} else {
						processOtherFile(file);
					}
				});
			}
			function processImageFile(file) {
				const reader = new FileReader();
				reader.onload = function(e) {
					const img = new Image();
					img.onload = function() {
						const fileData = {
							id: Date.now() + Math.random(),
							type: 'image',
							width: this.naturalWidth,
							height: this.naturalHeight,
							url: e.target.result,
							name: file.name
						};
						uploadedFiles.push(fileData);
						updateLayout();
					};
					img.src = e.target.result;
				};
				reader.readAsDataURL(file);
			}
			function processVideoFile(file) {
				const reader = new FileReader();
				reader.onload = function(e) {
					const video = document.createElement('video');
					video.onloadedmetadata = function() {
						const fileData = {
							id: Date.now() + Math.random(),
							type: 'video',
							width: this.videoWidth || 300,
							height: this.videoHeight || 400,
							url: e.target.result,
							name: file.name
						};
						uploadedFiles.push(fileData);
						updateLayout();
					};
					video.src = e.target.result;
				};
				reader.readAsDataURL(file);
			}
			function processOtherFile(file) {
				const fileTypeConfig = {
					'application/pdf': { icon: '📄', color: '#dc3545' },
					'application/msword': { icon: '📝', color: '#007bff' },
					'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { icon: '📝', color: '#007bff' },
					'application/vnd.ms-excel': { icon: '📊', color: '#28a745' },
					'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': { icon: '📊', color: '#28a745' },
					'application/vnd.ms-powerpoint': { icon: '📊', color: '#fd7e14' },
					'application/vnd.openxmlformats-officedocument.presentationml.presentation': { icon: '📊', color: '#fd7e14' },
					'text/plain': { icon: '📄', color: '#6c757d' },
					'application/x-rar-compressed': { icon: '🗜️', color: '#6f42c1' },
					'audio/mpeg': { icon: '🎵', color: '#e83e8c' },
					'audio/wav': { icon: '🎵', color: '#e83e8c' },
					'default': { icon: '📁', color: '#6c757d' }
				};
				const config = fileTypeConfig[file.type] || fileTypeConfig['default'];
				const fileData = {
					id: Date.now() + Math.random(),
					type: 'document',
					width: 200,
					height: 200,
					color: config.color,
					icon: config.icon,
					name: file.name
				};
				uploadedFiles.push(fileData);
				updateLayout();
			}
			function clearAllFiles() {
				uploadedFiles = [];
				updateLayout();
				document.getElementById('fileInput').value = '';
			}
			function createGridItems(fixedHeight) {
				return uploadedFiles.map((fileData) => {
					const element = document.createElement('div');
					element.className = 'grid-item';
					if (fileData.type === 'image') {
						const img = document.createElement('img');
						img.src = fileData.url;
						img.alt = fileData.name;
						element.appendChild(img);
					} else if (fileData.type === 'video') {
						const video = document.createElement('video');
						video.src = fileData.url;
						video.controls = true;
						video.muted = true;
						element.appendChild(video);
					} else {
						element.style.backgroundColor = fileData.color;
						element.innerHTML = `
							<div class="file-icon">${fileData.icon}</div>
							<div class="file-name">${fileData.name}</div>
						`;
					}
					const idealWidth = fileData.width * (fixedHeight / fileData.height);
					return {
						element: element,
						idealWidth: idealWidth
					};
				});
			}
			function smartGridLayout(customHeight = 200) {
				const container = document.querySelector(".container");
				const gridContainer = document.getElementById("gridContainer");
				gridContainer.innerHTML = "";
				if (uploadedFiles.length === 0) return;
				const allItems = createGridItems(customHeight);
				const containerWidth = container.offsetWidth - 60;
				const gap = 10;
				const rows = smartGrouping(allItems, containerWidth, gap);
				rows.forEach((rowItems) => {
					const rowElement = document.createElement("div");
					rowElement.className = "grid-row";
					const totalIdealWidth = rowItems.reduce((sum, item) => sum + item.idealWidth, 0);
					const availableWidth = containerWidth - (rowItems.length - 1) * gap;
					const scale = availableWidth / totalIdealWidth;
					rowItems.forEach(itemData => {
						const finalWidth = itemData.idealWidth * scale;
						itemData.element.style.width = finalWidth + "px";
						itemData.element.style.height = customHeight + "px";
						rowElement.appendChild(itemData.element);
					});
					gridContainer.appendChild(rowElement);
				});
			}
			function smartGrouping(items, containerWidth, gap) {
				const rows = [];
				let currentRow = [];
				let currentRowWidth = 0;
				for (let i = 0; i < items.length; i++) {
					const item = items[i];
					const itemWidth = item.idealWidth;
					const gapWidth = currentRow.length > 0 ? gap : 0;
					if (currentRowWidth + gapWidth + itemWidth <= containerWidth) {
						currentRow.push(item);
						currentRowWidth += gapWidth + itemWidth;
					} else {
						if (currentRow.length > 0) {
							rows.push(currentRow);
						}
						currentRow = [item];
						currentRowWidth = itemWidth;
					}
				}
				if (currentRow.length > 0) {
					rows.push(currentRow);
				}
				return rows;
			}
			function updateLayout() {
				const heightSlider = document.getElementById("heightSlider");
				const currentHeight = parseInt(heightSlider.value);
				smartGridLayout(currentHeight);
			}
			document.addEventListener("DOMContentLoaded", function () {
				const fileInput = document.getElementById('fileInput');
				const heightSlider = document.getElementById("heightSlider");
				const heightValue = document.getElementById("heightValue");
				fileInput.addEventListener('change', handleFileSelect);
				heightSlider.addEventListener("input", function () {
					const newHeight = parseInt(this.value);
					heightValue.textContent = newHeight + "px";
					smartGridLayout(newHeight);
				});
			});
		</script>
	</body>
</html>
